<template>
  <div style="width: 1920px; padding: 0 200px">
    <div class="ellipse">
      <div class="circle circle1">
        <div>这里是内容</div>
      </div>
      <div class="circle circle2">
        <div>第二个容器</div>
      </div>
      <div class="circle circle3">
        <div>第三个容器</div>
      </div>
      <div class="circle circle4">
        <div>第四个容器</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.ellipse {
  margin: 0 auto;
  width: 600px;
  height: 600px;
  padding: 0 200px;
  border-radius: 50%;
  position: absolute;
  border: 6px #555 solid;
  transform-style: preserve-3d;
  transform: rotateZ(0) rotateY(0) rotateX(70deg);
}

.ellipse .circle {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #eee;
  color: #fff;
}

.ellipse .circle1 {
  animation: move1 20s linear infinite;
}

.ellipse .circle2 {
  animation: move2 20s linear infinite;
}

.ellipse .circle3 {
  animation: move3 20s linear infinite;
}

.ellipse .circle4 {
  animation: move4 20s linear infinite;
}

@keyframes move1 {
  0% {
    transform: rotateZ(-270deg) translateX(300px) rotateZ(270deg) rotateY(0) rotateX(-90deg);
  }

  100% {
    transform: rotateZ(90deg) translateX(300px) rotateZ(-90deg) rotateY(0) rotateX(-90deg);
  }
}

@keyframes move2 {
  0% {
    transform: rotateZ(-180deg) translateX(300px) rotateZ(180deg) rotateY(0) rotateX(-90deg);
  }

  100% {
    transform: rotateZ(180deg) translateX(300px) rotateZ(-180deg) rotateY(0) rotateX(-90deg);
  }
}

@keyframes move3 {
  0% {
    transform: rotateZ(-90deg) translateX(300px) rotateZ(90deg) rotateY(0) rotateX(-90deg);
  }

  100% {
    transform: rotateZ(270deg) translateX(300px) rotateZ(-270deg) rotateY(0) rotateX(-90deg);
  }
}

@keyframes move4 {
  0% {
    transform: rotateZ(0) translateX(300px) rotateY(0) rotateX(-90deg) scale(1);
  }

  100% {
    transform: rotateZ(360deg) translateX(300px) rotateZ(-360deg) rotateY(0) rotateX(-90deg) scale(0.8);
  }
}
</style>
